<template>
  <div>
    <div v-if="detail">
      <div class="gl_mb_20">
        <el-divider content-position="left">
          <span class="divider_title">明细</span>
        </el-divider>
        <div class="text">
          <p><span class="text_color">商品名称：</span>{{ detail.Name }}</p>
          <p>
            <span class="text_color">时长：</span>
            {{ detail.Validity }}{{ detail.ValidityType && detail.ValidityType.Name }}
          </p>
          <p><span class="text_color">介绍：</span>{{ detail.Description || '- -' }}</p>
          <el-row v-if="detail.Modules.length > 0">
            <div v-for="item in detail.Modules" :key="item.Id" class="gl_dis_ib gl_middle" style="width: 160px">
              <el-checkbox v-model="checked" disabled>{{ item.Name }}</el-checkbox>
            </div>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  props: {
    detail: {
      type: Object,
      default: () => {}
    },
    payAmount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      checked: true
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  }
};
</script>

<style scoped>
.divider_title {
  font-size: 16px;
  color: #353434;
  font-weight: bold;
  line-height: 20px;
}
.text {
  font-size: 14px;
  color: #353434;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 12px;
}
.text_color {
  color: #939393;
}
</style>
